React Router

https://gyazo.com/0aa71a5783edc358767e6cb00795b329

ReactでSPAをつくるときにルーティングをしてくれるやつ

哲学

Static Rounitg

Rails, Express, Ember, Angularなどを使っているとstatic routingを使っている

renderingが実行されていない段階で、プリの初期化の一環としてroutingをする

React Routerもv.4より前はこういう感じだった

React Routerv.4移行はこういうやり方は忘れよう

開発秘話

RR v2でとったディレクションは不満だった。RRのAPIに制約を感じ、MichaelとRyanはいらいらしていた

理由

Reactの一部（lifecylceとか）を再実装する羽目になっている

ReactでUIをつくるときのメンタルモデルと一致していない

RRのworkshopが始まる数時間前、ホテルの廊下を歩いている我々は、「ぼくらがworkshopで教えるパターンを使ってrouterを構築したら、どうなる？」という議論をした

数時間後、ぼくらが考えたものは、未来にroutingに欲しいものだということを示すPoCが完成した

Reactの"外側"ではない、Reactの他の部分と自然に結びついたAPIにいきついた

Dynamic routing

レンダリング中にroutingを行う

アプリ実行前の設定はない

つまり、RRにおいてはほとんど全てはcomponentになる

ネストしたRoute

ResponsiveにおけるRoute

custom router

BrowserRouterとHashRouterがある

普通はBrowserRouterをつかう。静的なページしか配信しないならHashRouterがいいらしい（なぜ？）

History object

現在の位置の情報を持つオブジェクト。こいつがかわるとRouterはページを再描画する

RRの提供するコンポーネントは、context (React)から渡されるhistoryオブジェクトを使う。このため、componentはRouterの子孫のコンポーネントでなくてはならない

問題点

型を第一に作られていないのでlocation.stateに適切な値が渡されていなくて困るとかがある

疑問

Routeをどうかくか

一箇所にまとめるか

子ページに書いていくか